<template>
    <div class="container">
        <div class="more" v-if="!showHistory" @click="getHistory">加载历史</div>

        <div class="title" v-if="historyList.length">历史记录--已解决</div>

        <el-collapse v-model="activeName" accordion class="message">
            <el-collapse-item  v-for="(item,index) in historyList" :key="index" :name="index+'_history'">
                <template slot="title">
                    <div class="">问题提出人 {{item.username}} 问题创建日期 {{item.commitDate}}   问题解决日期 {{item.updateTime}}   问题单号 {{item.orderNo}}</div>
                </template>
                <el-input
                    class="suggestion"
                    type="textarea"
                    disabled
                    :autosize="{ minRows: 2}"
                    placeholder="请输入你的建议,运维会尽快回复您的哦"
                    v-model="item.questionFeedback">
                </el-input>
                 <div class="solve"  v-for="(n,i) in item.replyInfoList" :key="i">
                    <div class="manage" v-if="n.role == 1">
                        <!-- 客服 -->
                        <div class="space"></div>
                        <i class="bubble el-icon-caret-right" ></i>
                        <div class="word">{{n.comment}}</div>
                    </div>
                    <div class="client" v-if="n.role == 0">
                        <!-- 客户 -->
                        <div>{{n.comment}}</div>
                        <i class="bubble el-icon-caret-left" ></i>
                    </div>
                </div>
            </el-collapse-item>
            
        </el-collapse>


        <div class="title">问题记录--尚未解决</div>

        <el-collapse v-model="activeName2" accordion class="message">
            <el-collapse-item  v-for="(item,index) in doingList" :key="index" :name="index+'_doing'">
                <template slot="title">
                    <div class="">问题提出人 {{item.username}}  问题创建日期 {{item.commitDate}}   问题单号 {{item.orderNo}}</div>
                </template>
                <el-input
                    class="suggestion"
                    type="textarea"
                    disabled
                    :autosize="{ minRows: 2}"
                    placeholder="请输入你的建议,运维会尽快回复您的哦"
                    v-model="item.questionFeedback">
                </el-input>
                 <div class="solve"  v-for="(n,i) in item.replyInfoList" :key="i">
                    <div class="manage" v-if="n.role == 1">
                        <!-- 客服 -->
                        <div class="space"></div>
                        <i class="bubble el-icon-caret-right" ></i>
                        <div class="word">{{n.comment}}</div>
                    </div>
                    <div class="client" v-if="n.role == 0">
                        <!-- 客户 -->
                        <div>{{n.comment}}</div>
                        <i class="bubble el-icon-caret-left" ></i>
                    </div>
                </div>
                <div class="solve">
                    <div class=" manage input">
                        <div class="word">
                            <el-input  v-model="item.newMess" placeholder="请输入内容"></el-input>
                            <i class="el-icon-s-promotion" @click="submitMess(item.newMess,item)"></i>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
            
        </el-collapse>


    </div>
</template>

<script>
export default {
    name: 'feedback',
    data() {
        return {
            showHistory: false,


            activeName: '',
            activeName2: '',

            historyList: [],
            doingList: [],


            newMess: '',//回复的话

            

        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            const u = '/screen/largeQa/queryLargeQa?getHistory=false&isKeFu=true';
            this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('manage_token')}})
            .then((res)=>{
                if(res.data.code == 200){
                    this.doingList =  res.data.data;
                }else{
                    this.$message.error(res.data.msg);
                };;
            }).catch((err)=>{
                console.log(err);
            });
            
        },
        getHistory() {
            this.showHistory=true;
            const u = '/screen/largeQa/queryLargeQa?getHistory=true&isKeFu=true';
            this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('manage_token')}})
            .then((res)=>{
                if(res.data.code == 200){
                    this.historyList =  res.data.data;
                }else{
                    this.$message.error(res.data.msg);
                };
            }).catch((err)=>{
                console.log(err);
            });
        },
        submitMess(mess,item) {
            // 问题下面提交新的回复
            let params = {
                "comment": mess,
                "qaId": item.orderNo,
                "role": 1
            };
            const url = '/screen/replyInfo/updateLargeQaStatus?isKeFu=true';
            const headers = {
                'Content-Type': 'application/json;charset=UTF-8',
                'cloud-Auth-Token': localStorage.getItem('manage_token')
            };
            this.$axios.post(url, params, {headers}).then((res) => {
                if(res.data.code == 200){
                    this.$message.success(res.data.msg);
                    this.getData();
                }else{
                    this.$message.error(res.data.msg);
                };
            }).catch((error) => {
                console.warn(error);
            });
        }
    }
};
</script>

<style scoped lang="less">
.more {
    width: 80%;
    margin: 0 auto;
    color: #ccc;
    font-size: 14px;
    text-align: center;
}
.title {
    width: 100%;
    font-size: 16px;
    color: #ccc;
    line-height: 3;
}
.message {
    margin-bottom: 20px;
    .suggestion {
        width: 100%;
        display: flex;
        font-size: 20px;
        padding: 10px 0;
        line-height: 1;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .solve {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        margin-bottom: 5px;
        .client {
            max-width: 60%;
            width: fit-content;
            background: rgba(175, 232, 255, 0.541);
            font-size: 20px;
            line-height: 20px;
            padding: 10px 20px;
            box-sizing: border-box;
            border-radius: 5px;
            border: 1px solid rgba(175, 232, 255, 1);
            position: relative;
            .bubble {
                position: absolute;
                left: -14px;
                top: 8px;
                color: rgba(175, 232, 255, 1);
            }

        }
        .manage {
            height: fit-content;
            font-size: 20px;
            line-height: 40px;
            text-align: right;
            display: flex;
            justify-content: space-between;
            position: relative;
            .space {
                width: 40%;
            }
            .word {
                max-width: 60%;
                width: fit-content;
                font-size: 20px;
                line-height: 20px;
                padding: 10px 20px;
                box-sizing: border-box;
                border-radius: 5px;
                border: 1px solid rgba(176, 252, 141, 1);
                background: rgba(176, 252, 141, 0.664);
            }
            .bubble {
                position: absolute;
                right: -12px;
                top: 8px;
                color: rgba(176, 252, 141, 1);
            }
        }
        .input {
            display: flex;
            justify-content: space-around;
            margin-top: 30px;
            position: relative;
            .word {
                width: 60%;
                height: fit-content;
                font-size: 20px;
                line-height: 20px;
                box-sizing: border-box;
                border-radius: 5px;
                border: 1px solid rgba(176, 252, 141, 1);
                background: transparent;
                display: flex;
                align-items: center;
                .el-icon-s-promotion {
                    font-size: 20px;
                    color: rgba(176, 252, 141, 1);
                    margin-left: 10px;
                }
            }
            .over {
                position: absolute;
                right: 20px;
            }
            .tips {
                font-size: 12px;
                line-height: 1;
                color: red;
            }

        }

    }    
}
.addOne {
    font-size: 16px;
    color: turquoise;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-top: 20px;
    .el-icon-circle-plus-outline {
        font-size: 20px;
        margin-left: 10px;
    }
}
</style>
